/**
 * 小额退款弹窗
 */
<template>
    <kdx-modal-frame v-model="value" :width="600" :closable="false" okText="小额退款" @on-cancel="handleCancel"
                 @on-ok="handleOk">
        <div class="order-list-refund-modal">
          <div class="header">

          </div>
            <div class="refund-box">
                <div class="icon">
                    <Icon type="ios-help-circle"/>
                </div>
                <div class="content">
                    <div class="title">
                        是否小额退款?
                    </div>

                    <div class="title">
                      请仔细确认订单商品是否都已收货！
                    </div>
                    <div class="text">
                      <p>1、处于维权状态、存在整单维权的则不可再次进行小额退款；</p>
                      <p>2、后台确认、货到付款，非线上支付的情况则不可退款；</p>
                      <p>3、退款金额不可为0且不可大于订单实付金额。</p>
                      <p>微信支付方式：会返回到相应的支付渠道(如零钱或银行卡)</p>
                      <p>如有余额抵扣：会返回金额到商城用户余额</p>
                      <p>如有积分抵扣：只有全部退款时, 申请维权的订单抵扣积分才会返回到用户积分中。</p>
                    </div>
                    <div class="text">
                    </div>

                    <div class="input">
                        <Form v-if="value" ref="form" :model="model" :rules="rules" @submit.native.prevent>
                          <Form :label-width="80">
                            <FormItem label="小额退款：">
                              <kdx-rr-input v-model="model.refund_price" number :fixed="2" :minValue="0" :maxValue="9999999.99" class="width-160"
                                            @on-blur="changeSmallRefund">
                                <span slot="append">元</span>
                              </kdx-rr-input>
                            </FormItem>
                          </Form>
                            <FormItem prop="refund_reason">
                                <Input type="textarea" v-model="model.refund_reason" autofocus maxlength="100" show-word-limit placeholder="请备注原因"/>
                            </FormItem>
                          <kdx-hint-text>为了防止误退款，请输入管理员密码进行操作</kdx-hint-text>
                            <FormItem prop="password">
                                <Input v-model="model.password" :type="showPassword? 'password' : 'text'"
                                       :icon="showPassword? ' iconfont icon-eye-off': ' iconfont icon-eye'"
                                       placeholder="请输入管理员密码"
                                       @on-click="passwordClick" />
                            </FormItem>
                        </Form>
                    </div>

                  <div class="shop-total">
                    <div class="shop-total-content">
                      <div class="shop-total-content-item">
                        <div class="label">实付款：</div>
                        <div class="price">￥{{ pay_price }}</div>
                      </div>
                      <div v-if="refund_price && parseFloat(refund_price) > 0" class="shop-total-content-item">
                        <div class="label">已维权退款：</div>
                        <div class="price">￥{{ refund_price }}</div>
                      </div>
                      <div class="shop-total-content-item">
                        <div class="label">预计买家实付：</div>
                        <div class="price emphasize">￥{{realPayPrice ? realPayPrice : (parseFloat(pay_price) - parseFloat(refund_price)).toFixed(2) }}</div>
                      </div>
                    </div>
                      </div>
                    </div>
                  </div>
                </div>
            </div>
        </div>
    </kdx-modal-frame>
</template>

<script>
    export default {
        name: "index",
        props: {
            id: {
                type: [String, Number],
                required: true
            },
            pay_price: {
              type: Number,
              required: true
            },
            refund_price: {
              type: Number,
              required: true
          }
        },
        data() {
            return {
                realPayPrice: 0,
                model: {
                    /* 退款金额 */
                    refund_price: 0.00,
                    password: '',
                    /* 关闭订单原因 */
                    refund_reason: ''
                },
                rules: {
                    refund_price: [
                      {required: true, message: '小额退款必填'}
                    ],
                    refund_reason: [
                      {required: true, message: '备注原因必填'}
                    ],
                    password: [
                        {required: true, message: '管理员密码必填'}
                    ]
                },
                value: false,
                showPassword: true,
                loading: false,
            };
        },
        methods: {
            setValue() {
                this.value = true;
                if (this.value) {
                    this.model.password = '';
                }
            },
            handleCancel() {
                this.value = false;
                this.model.refund_reason = '';
                this.model.refund_price = 0.00;
                this.realPayPrice = (parseFloat(this.pay_price) - parseFloat(this.refund_price)).toFixed(2);
            },
            handleOk() {
                if (this.model.refund_price <= 0) {
                  return this.$Message.error('小额退款金额不可为0');
                }
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        let params = {
                            order_id: this.id,
                            password: this.model.password,
                            refund_price: this.model.refund_price,
                            refund_reason: this.model.refund_reason
                        };
                        if(this.loading ) return;
                        this.loading = true;
                        this.$api.orderApi.autoSmallRefund(params).then(res => {
                            if (res.error === 0) {
                                this.$Message.success('小额退款操作成功');
                                this.value = false;
                                this.model.refund_reason = '';
                                this.$emit('on-refresh');
                            }
                        }).finally(()=> {
                            this.loading = false
                        });
                    }
                });
            },
            passwordClick() {
                this.showPassword = !this.showPassword;
            },
          // 小额退款
          changeSmallRefund() {
            let price = (parseFloat(this.pay_price) - parseFloat(this.refund_price)).toFixed(2);
            if (this.model.refund_price <= 0) {
              return this.$Message.error('小额退款金额不可为0');
            }
            if (this.model.refund_price >= price) {
              return this.$Message.error('小额退款金额不可大于实际付款金额');
            }
            this.$nextTick(() => {
              if (parseFloat(this.model.refund_price) && parseFloat(this.model.refund_price) > 0) {
                this.model.refund_price = parseFloat(this.model.refund_price).toFixed(2);
              } else {
                this.model.refund_price = '0.00';
                this.$set(this.model, 'refund_price', '0.00');
              }
              this.calculateShopPayment();
            })
          },
          // 计算实付款
          calculateShopPayment() {
            this.realPayPrice = (parseFloat(this.pay_price) - parseFloat(this.refund_price) - parseFloat(this.model.refund_price)).toFixed(2);
          },
        }
    };
</script>

<style scoped lang="scss">
    .order-list-refund-modal {
        padding: 32px 20px 26px;

        .refund-box {
            display: flex;
            .icon {
                font-size: 24px;
                color: $warning-color;
                padding-right: 10px;
                ::v-deep .ivu-icon {
                    vertical-align: super;
                }
            }
            .content {
                .title {
                    @include font-16-22-bold;
                    color: $text-first;
                    padding: 1px;
                }
                .text {
                    @include font-14-20;
                    padding: 10px 0;
                }
                .ivu-form-item {
                    margin-bottom: 9px !important;
                }
            }
        }
      // 底部
      .shop-total {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-end;

        > .shop-total-content {
          padding-top: 10px;
          padding-bottom: 10px;
          padding-right: 10px;
          > .shop-total-content-item {
            padding-top: 6px;
            @include font-14-20;
            color: $text-first;

            > .label {
              display: inline-block;
              width: 100px;
              text-align: right;
            }

            > .price {
              display: inline-block;
              padding-left: 16px;
            }
          }

          // 强调
          .emphasize {
            @include font-14-20-bold;
            color: $danger-color;
            .price {
              font-size: 20px;
            }
          }
        }
      }
    }
</style>
